<template>
  <div class="home">

    <!-- 顶部 -->
    <van-nav-bar class="topbar">
      <template #right>
        <van-icon
          name="manager"
          size="25"
          @click="goLogin"
        />
      </template>
      <template #left>
        <van-image
          width="98"
          height="18"
          src="https://m.zto.com/static/images/home/logo.png"
        />
      </template>
    </van-nav-bar>

    <!-- 查询输入框和背景 -->
    <div class="banner">
      <van-search
        shape="round"
        background=none
        placeholder="输入运单号查询物流详情"
      />
    </div>

    <!-- 分类菜单 -->
    <van-grid :column-num="2">
      <van-grid-item
        icon="cashier-o"
        text="我要寄件"
        @click="toExpress"
      />
      <van-grid-item
        icon="service-o"
        text="联系客服"
      />
      <van-grid-item
        icon="location-o"
        text="附近网点"
      />
      <van-grid-item
        icon="balance-o"
        text="运费时效"
        @click="toFreight"
      />
    </van-grid>

    <!-- 登录 -->
    <div
      class="tips"
      v-if="notLogin"
    >
      <p>快件管理、详情订阅、积分奖励...尽在中通会员</p>
      <van-button
        plain
        round
        size="mini"
        type="info"
        @click="goLogin"
      >立即登录</van-button>
    </div>
    <!-- 已登录提示 -->
    <div
      class="tips"
      v-else
    >
      <div>
        <span>Hi ,<em>{{this.userInfo.tele}}</em></span>
        <a @click="exitLog">退出登录</a>
      </div>
      <van-button
        plain
        round
        size="mini"
        type="info"
        @click="goLogin"
      >查看历史</van-button>
      <van-button
        plain
        round
        size="mini"
        type="info"
        @click="goLogin"
      >地址薄</van-button>
      <van-button
        plain
        round
        size="mini"
        type="info"
        @click="goLogin"
      >我的快递</van-button>
    </div>

    <!-- 新闻 -->
    <div class="news">
      <van-cell
        title="| 新闻动态"
        is-link
        to="news"
        value="更多"
      />
      <van-cell
        v-for="newInfo in newsInfo"
        :key="newInfo.id"
        :value="newInfo.time+newInfo.news"
      />
    </div>

    <!-- 分类菜单 -->
    <div class="menu">
      <van-grid
        :column-num="3"
        :border="false"
      >
        <van-grid-item
          v-for="category in categories"
          :key="category.id"
          :text="category.title"
        />
        <van-grid-item />
      </van-grid>
    </div>

    <!-- 联系方式 -->
    <div class="phone">
      <van-grid
        direction="horizontal"
        :column-num="2"
      >
        <van-grid-item
          icon="phone-o"
          text="客服电话 95311"
        />
        <van-grid-item
          icon="down"
          text="下载中通APP"
        />
      </van-grid>
    </div>

    <!-- 底部logo -->
    <div class="bottom">
      <van-grid
        direction="horizontal"
        :column-num="1"
      >
        <van-grid-item>
          <van-image
            width="100"
            height="20"
            src="https://m.zto.com/static/images/home/logo.png"
          />
        </van-grid-item>
      </van-grid>
    </div>
    <p></p>
  </div>
</template>

<script>
import { getHomePageData } from '@/api/home'
export default {
  name: 'Home',
  data() {
    return {
      categories: [], // 分类数据
      newsInfo: [], // 新闻数据
      userInfo: {}, // 用户数据
      notLogin: true, // 用户登录状态
      Token: {} // 是否存在Token
    }
  },
  methods: {
    toExpress() {
      this.$router.push('/express')
    },
    goLogin() {
      if (this.userInfo) {
        this.$router.push('/mine')
      } else {
        this.$router.push('/login')
      }
    },
    exitLog() {
      localStorage.removeItem('poster')
      localStorage.removeItem('receiver')
      localStorage.removeItem('Token')
      this.Token = {}
      location.reload()
    },
    toFreight() {
      this.$router.push('/freight')
    }
  },
  created() {
    this.Token = localStorage.getItem('Token')
    if (this.Token) {
      this.userInfo = JSON.parse(this.Token)
      if (this.userInfo) {
        this.notLogin = false
      } else {
        this.notLogin = true
      }
    } else {
      this.userInfo = null
    }
    getHomePageData()
      .then(res => {
        this.categories = res.data.data.footBar.info
        this.newsInfo = res.data.data.newsInfo
        // console.log(this.newsInfo)
      })
  }
}
</script>

<style lang="less" scoped >
body,
.home {
  background-color: #f2f4f7;
}
.topbar {
  background: linear-gradient(to right, #ffffff, #eeeeee);
}
/deep/.van-search {
  width: 100%;
  position: absolute;
  bottom: 0;
}
.banner {
  width: 100%;
  height: 180px;
  position: relative;
  background: url("https://fscdn.zto.com/fs8/M02/0D/31/wKhBD1_yqLKAL4LtAAcimVc02Jw684.jpg")
    center/100%;
  margin-bottom: 10px;
}
.tips {
  height: 80px;
  padding-top: 10px;
  margin-top: 10px;
  background-color: #ffffff;
  text-align: center;
  div {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    span {
      font-size: 14px;
      color: #666666;
      em {
        color: #0080ff;
        font-style: normal;
      }
    }
    a {
      font-size: 14px;
      color: #0080ff;
    }
  }
  /deep/.van-button {
    margin: 0 20px;
  }
}
p {
  text-align: center;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
}
.news {
  margin-top: 10px;
}
.menu {
  margin-top: 10px;
}
.phone {
  background-color: #59b0fb;
  /deep/.van-grid-item__content {
    background: linear-gradient(to right, #4f9afa, #59b0fb);
    color: #ffffff;
    height: 32px;
  }
  /deep/.van-grid-item__text {
    color: #ffffff;
  }
  /deep/.van-icon {
    font-size: 16px;
  }
}
</style>
